<template>
<div class="mapDiv">
  <map id="map" 
  :longitude="longitude" 
  :latitude="latitude" 
  :scale="scale" 
  :markers="markers" 
  :polyline="polyline"
  :circles="comCircles"
  include-points
  show-location 
  @markertap="markertap"
  @controltap="controltap"
  @regionchange="regionChange"
  @begin="regionChangeBegin" 
  @end="regionChangeEnd"
  @tap="clicktap"
  @poitap="poitap"
  @updated="updated"
  ></map>
</div>


</template>

<script>
  export default {
    data() {
      return {
        latitude: '',//纬度
        longitude: '',// 经度
        markers: [{ //标记点
          iconPath: "/static/images/user/map.png",
          id: 1,
          latitude: 30.557619094848633,
          longitude: 104.05237579345703,
          zIndex: 99,
          width: 36,
          height: 47,
          title: "脑卫士店铺111",
          name: "脑卫士店铺111",
          address: "脑卫士店铺111",
        },{ //标记点
          iconPath: "/static/images/user/map.png",
          id: 2,
          latitude: 30.5702,
          longitude: 104.06476,
          zIndex: 99,
          width: 36,
          height: 47,
          title: "脑卫士店铺222",
          name: "脑卫士店铺222",
          address: "脑卫士店铺222",
        }],
        circles: [],
        scale: 12,
        polyline: [{//路线
          points: [{ 
            longitude: 104.06476,
            latitude: 30.57447
          }, {
            longitude: 104.26476,
            latitude: 30.57447
          },{
            longitude: 104.26476,
            latitude: 30.60447
          },{
            longitude: 104.27476,
            latitude: 30.59447
          },{
            longitude: 104.06476,
            latitude: 30.57447
          }],
          color: "#000000",
          width: 1,
          dottedLine: false
        }], 
      }
    }, 
    computed:{
      comCircles(){
        return this.circles
      }
    },
    onLoad(){
      this.getCurrentLocation()
      // this.qqmapsdk = new QQMapWX({
      //       key: 'your key'
      // });
    },
    onReady(){
      //this.getLngLat()
    },
    onShow(){
      //this.choseMap()
    },
    methods: {
      getCurrentLocation(){//获取用户当前的经纬度
        wx.getLocation({  
          type: 'gcj02',  
          success: (res)=> { 
            console.log(res)
            this.latitude = res.latitude
            this.longitude = res.longitude
            // this.circles = [{
            //   latitude: this.latitude,
            //   longitude: this.longitude,
            //   color: '#FF0000DD',
            //   fillColor: '#7cb5ec88',
            //   radius: 1000,
            //   strokeWidth: 1
            // }]
          }  
        })  
      },
      getChangeLoaction(){

      },
      openMap(){//打开地图导航
        wx.openLocation({//​使用微信内置地图查看位置。
          latitude: 30.5702,//要去的纬度-地址
          longitude: 104.06476,//要去的经度-地址
          name: "脑卫士店铺",
          address: '脑卫士店铺'
        }) 
      },
      choseMap(){//选择地图
        wx.chooseLocation({
          success:  (res)=> {
            console.log(res,"location")
          }
        })
      },
      markertap(res){
        //let aaa = this.markers.map(item =>item.id).includes(res.mp.markerId)
        this.markers.map((item)=>{
          if(item.id === res.mp.markerId){
            let mapdata = JSON.stringify(item); 
            const url = `../user-map-indetail/main?mapdata=${mapdata}`;
            wx.navigateTo({ url })
          }
        })
      },
      //点击缩放按钮动态请求数据
      // controltap(e) {
      //   console.log(e)
      //   console.log('点击缩放按钮动态请求数据')
      // },
      poitap(){
        console.log("在地图渲染更新完成时触发	")
      },
      regionchange(e) {
        this.ctx.getScale({// this.ctx是MapContext对象的引用 https://developers.weixin.qq.com/miniprogram/dev/api/map/MapContext.html
            success: (res) => {
              console.log(res)
              this.scale = res.scale
            }
        })
        this.ctx.getCenterLocation({
            success: (res) => {
              console.log(res)
              this.latitude = res.latitude
              this.longitude = res.longitude
            }
        })
      },
      regionChangeBegin(e){ //拖拽起点
        //console.log(e)
        //this.getLngLat()
      },
      regionChangeEnd(e){ //这是拖拽到终点
        //console.log(e)
        this.getLngLat()
      },
      clicktap(){
        console.log("点击了地图")
      },
      // updated(){
      //   console.log("点击地图poi点时触发")
      // },
      getLngLat() {
        let mapCtx = wx.createMapContext("map");
        mapCtx.getCenterLocation({
          success: (res)=> {
            this.latitude = res.latitude
            this.longitude = res.longitude
            // this.markers = [{
            //     id: 0,
            //     iconPath: "../../images/location1.png",
            //     longitude: res.longitude,
            //     latitude: res.latitude,
            //     width: 40,
            //     height: 40
            // }]
          }
        })
      },
      getPoiList (longitude, latitude) {
          // 调用接口
          this.qqmapsdk.reverseGeocoder({
               location: {
                    latitude: latitude,
                    longitude: longitude,
               },
               get_poi: 1,
               poi_options: 'policy=2;radius=3000;page_size=20;page_index=1',
               success (res) {
                 console.log(res)
                    
               },
               fail(res) {
                    console.log(res);
               },
               complete(res) {
                    console.log(res);
               }
          });
      },
      wxAlert(txt){
        wx.showToast({
            title: txt,
            icon: "none",
            duration: 2000,
            mask: true
        })
      },
    }
  }
</script>

<style scoped>
.mapDiv{
  background: #ccc;
  width: 100%;
  height: 100%;
  position: absolute;
}
.mapDiv map{
  width: 100%;
  height: 100%;
}
</style>
